<template>
  <div>
    <UserSearch @add-user="drawer = true; title='添加用户'" v-model="params" @search="page =1; showData()"></UserSearch>
    <!-- 引入表格 -->
    <Table border :columns="columns" :data="data" row-key="id">

      <template #action="{ row, index }">
        <Button type="success" icon="md-walk" size="small" style="margin-right: 5px" v-auth:user:view:bind:role
                :disabled="row.built" @click="bindRole(row)">分配角色</Button>
        <Button type="primary" icon="ios-create-outline" size="small" style="margin-right: 5px"
                v-auth:user:view:modify  @click="show(row)">修改</Button>

        <Button type="error" icon="ios-remove-circle-outline" v-auth:user:view:remove
                :disabled="row.built" size="small" @click="remove(row)">注销
        </Button>
      </template>

      <template #status="{ row, index }">
        <DotTag type="primary" v-if="row.status">正常</DotTag>
        <DotTag type="error" v-else>已注销</DotTag>
      </template>

      <template #locked="{ row, index }">
        <Tag color="error" v-if="row.locked">是</Tag>
        <Tag color="primary" v-else>否</Tag>
      </template>

      <template #footer>
        <div style="min-width: 300px; max-width: 380px;">
          <van-pagination v-model="page" :total-items="total" :items-per-page="pageSize"
                          @page-click="showData" :show-page-size="5" force-ellipses />
        </div>
      </template>
    </Table>

    <Drawer
        :title="title"
        v-model="drawer"
        width="720" v-if="drawer" @on-close="closeWin"
        :mask-closable="false"
        :styles="{height: 'calc(100% - 55px)',overflow: 'auto',paddingBottom: '53px',position: 'static'}">
      <!-- 引入用户表单组件 -->
        <UserForm @close-win="closeWin" :row="userRow"></UserForm>
    </Drawer>

    <Modal v-model="roleWin" title="分配部门" v-if="roleWin">
      <BindRole ref="role" :user-id="userId"></BindRole>
      <template #footer>
        <Button type="default" @click="this.departWin = false">关闭</Button>
        <Button type="primary" @click="saveBindRoles">确定</Button>
      </template>
    </Modal>

  </div>
</template>
<script>
import UserForm from '../components/UserForm.vue'
import BindRole from '../components/BindRole.vue'
import DotTag from '../components/DotTag.vue'
import VanPagination from '../components/VanPagination.vue'
import UserSearch from '../components/UserSearch.vue'

export default {
  data() {
    return {
      drawer: false,
      title: '',
      userRow: {} , // 选中的用户对象
      roleWin: false,
      page: 1,
      total: 0,
      pageSize: 5,
      params: {}, //查询参数
      userId: -1, // 选中的用户ID
      columns: [
        {
          type: 'expand',
          width: 50,
          render: (h, {row}) => {  // render 函数中的 h 用来构建一个 虚拟 dom , 三个参数 （1. 要创建的标签名、 2. 标签的属性、 3. 子元素）
            return h('div', {class: 'user-details'}, [
              h('p', [
                h('label', ['真实姓名:']),
                h('span', [row.realName])
              ]),
              h('p', {}, [
                h('label', ['用户角色:']),
                h('span', [row.roles])
              ]),
              h('p', {}, [
                h('label', ['电子邮箱:']),
                h('span', [row.email])
              ]),
              h('p', {}, [
                h('label', ['注册时间:']),
                h('span', [row.createTime])
              ]),
            ])
          }
        },
        {title: '用户名', key: 'username', tree: true},
        {title: '手机号', key: 'tel'},
        {title: '出生日期', key: 'birth'},
        {title: '部门', key: 'departs'},
        {title: '岗位', key: 'positions'},
        {title: '锁定', slot: 'locked'},
        {title: '操作', slot: 'action', width: 440, align: 'center'}
      ],
      data: [],
    }
  },
  created() {
    this.showData();
  },
  methods: {
    show(row) {
       this.title = '修改用户' ;
       this.drawer = true ;
       this.userRow = {...row};
    },
    saveBindRoles() {
      // 获取 穿梭框中 选中的 部门ID
      let roles = this.$refs.role.targetKeys;
      // 调用接口、完成 部门绑定
      this.$api.bindRoles(this.userId, roles).then(({data: ret}) => {
        if (ret.status === "10000") {
          this.userId = -1;
          this.roleWin = false;
          this.$Message.success({background: true, content: "角色绑定成功"});
          // 刷新数据
          this.showData();
        } else {
          this.$Message.error({background: true, content: ret.message});
        }
      })
    },
    closeWin(flag) {
       if (flag) this.showData();
       this.drawer = false ;
       this.userRow = {} ;
    },
    remove(row) {
      this.$Modal.confirm({
        title: '提示',
        content: `您确定要删除该角色吗?`,
        onOk: () => {
          // 负责 调用接口、完成 菜单状态的修改
          this.$api.removeUser(row.id).then(({data: ret}) => {
            if (ret.status === "10000") {
              this.$Message.success({background: true, content: "数据删除成功"});
              this.showData();
            } else {
              this.$Message.error({background: true, content: ret.message});
            }
          })
        }
      })
    },
    bindRole(row) {
      // 显示弹出层
      this.roleWin = true;
      this.userId = row.id;
    },
    showData() {
      this.$api.queryUsers(this.page, this.pageSize, this.params).then(({data: ret}) => {
        if (ret.status === "10000") {
          this.data = ret.data.list;
          this.total = ret.data.total;
        }
      })
    }
  },
  components: {
    UserForm,
    BindRole,
    DotTag,
    VanPagination,
    UserSearch
  }
}
</script>


<style>
.user-details {
  position: relative;
}

.user-details p {
  height: 24px;
  line-height: 24px;
  clear: both;
}

.user-details label {
  font-weight: bold;
  float: left;
  text-align: right;
  margin: 0 8px 0 0;
}
</style>
